<template>
	<view>
		<view class="bottom-bow"></view>
		<view class="swiper-tab">
			<view 
				class="swiper-tab-list" 
				:class="{on:currentTab==index}" 
				v-for="(item,index) in tabList" 
				:key="item.type" @click="tabClick(index)"
			>
				{{item.title}}
			</view>
		</view>
		<swiper 
			class="swiper-box" 
			:current="currentTab" 
			:style="swiperHinget" 
			@change="bindChange"
		>
			<swiper-item v-for="(item,index) in tabList" :key="index" class="swiper-item">
				<work-order  :worktype="item.type" :height="swiperHinget"></work-order>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 采用组件化构建 轮播组件 > 滚动组件 > item组件
	import workOrder from "../../../components/work-order/workOrder.vue"
	import util from "../../../utils/util.js"
	import { workModule } from "../../../modules/workOrder.js"
	const Work = new workModule()
	export default {
		components:{
			workOrder
		},
		data() {
			return {
				tabList: [
					{
						title: "待办事项",
						type: 1
					},{
						title: "进行事项",
						type: 3
					},{
						title: "完成事项",
						type: 4
					}
				],
				list: '',
				currentTab: 0,
				swiperHinget: ''
			}
		},
		onLoad() {
			let Info = util.getSystemInfo()
			//#ifdef APP-PLUS
			this.swiperHinget = `height:${Info.windowHeight - 95}px`;
			//#endif
			//#ifdef MP-WEIXIN
			this.swiperHinget = `height:${Info.windowHeight - 40}px`;
			//#endif
		},
		methods: {
			tabClick(index) { // 点击切换
				this.currentTab = index
			},
			bindChange(e) { // 滑动切换
				this.currentTab = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/scss/common.scss";

	.swiper-tab {
		position: fixed;
		top: 0;
		z-index:100;
		width: 100%;
		background-color: #fff;
		text-align: center;
		line-height: ws(40);
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
		.swiper-tab-list {
			font-size: 30rpx;
			display: inline-block;
			width: 33.33%;
			color: #0C0E20;
		}
		.on {
			color: #1B77F6;
			position: relative;
			&:after{
				content: '';
				position: absolute;
				width: 50%;
				height: ws(1);
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				border-radius: 5px;
				background-color: #1B77F6;
			}
		}
	}

	
	

	.swiper-box {
		margin-top: ws(40);
		display: block;
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f7;
	}
</style>
